<template>
  <!-- Facebook拓客系统 -->
  <div class="facebook">
    <!-- banner部分 -->
    <banner-view :bdata="bannerData"> </banner-view>

    <!-- Facebook拓客系统能做什么 -->
    <div class="layitem_warp_whie">
      <h4>Facebook拓客系统能做什么</h4>
    </div>

    <layitem :rtdata="fistdata"></layitem>

    <layitemleft :lfdata="quqiu"></layitemleft>

    <layitem :rtdata="twodata"></layitem>

    <layitemleft :lfdata="obey"></layitemleft>

    <whatlist :facebook="bookdata"></whatlist>

    <!-- Facebook拓客系统的优势 -->
    <div class="sanlan_warp">
      <div class="layitem_warp_whie">
        <h4>{{ fistitem.title }}</h4>
      </div>

      <div class="whatsapp_warp tydisplay">
        <div class="whatsapp_item" v-for="(item, i) in fistitem.list" :key="i">
          <div class="whatsapp_item_img">
            <img :src="item.imgurl" alt="" />
          </div>
          <h4>{{ item.name }}</h4>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>

    <!-- 客户案例 -->
    <caseview></caseview>

    <!-- 51出海转为跨境流量服务 -->
    <pssea></pssea>

    <!-- 轮播新闻 -->
    <news-list :ldata="newslist"></news-list>
  </div>
</template>

<script>
import bannerView from "@/components/bannerview";
import caseview from "@/components/case";
import layitem from "@/components/layitem"; //布局组件 --左图
import layitemleft from "@/components/layitemleft"; //布局组件 --右图
import whatlist from "@/components/whatlist"; //布局组件 --上下布局
import youshi from "@/components/youshi"; //WhatsApp客服系统的优势
import pssea from "@/components/pssea";
import newsList from "@/components/newslist";

export default {
  components: {
    layitem,
    layitemleft,
    caseview,
    bannerView,
    whatlist,
    youshi,
    pssea,
    newsList,
  },
  data() {
    return {
      bannerData: {
        bgimg: {
          backgroundRepeat: "no-repeat",
          paddingBottom: "18%",
          overflow: "hidden",
          backgroundSize: "100% auto",
          backgroundImage:
            "url(" +
            require("@/assets/Product_page_facebook_desktop/top_page_facebook_bg.png") +
            ")",
        },
        bannertxt: {
          title: "Facebook拓客系统",
          param:
            "基于Facebook进行、用户数据采集、指定范围涨粉、自动定时发帖、多帐号聚合聊天的引流推广系统",
        },
      },
      fistdata: {
        title: "用户数据采集",
        imgurl: require("@/assets/Product_page_facebook_desktop/user_data_collection_img.png"),
        list: [
          {
            icon: require("@/assets/Product_page_facebook_desktop/icon_hi-precision_user_target.png"),
            name: "高精准用户定向",
            content:
              "可定向采集Facebook特定兴趣的群组、公共主页，精准获取高质量客户数据",
          },
          {
            icon: require("@/assets/Product_page_facebook_desktop/icon_mulity_dimension_data_collction.png"),
            name: "多维数据采集",
            content:
              "支持获取包含为UID、姓名、性别、生日、邮箱、电话、地区等多种资料",
          },
          {
            icon: require("@/assets/Product_page_facebook_desktop/icon_user_resource_filter.png"),
            name: "客户资源筛选",
            content:
              "采集后的数据可以进行多方位筛选，提取出更精准的客户数据表单，提供定向涨粉元数据。",
          },
        ],
      },
      twodata: {
        title: "自动内容营销",
        imgurl: require("@/assets/Product_page_facebook_desktop/auto_content_marketing_bell_img.png"),
        list: [
          {
            icon: require("@/assets/Product_page_facebook_desktop/icon_auto_timing_post.png"),
            name: "定时发帖",
            content: "7*24小时定时定点发帖，多重话术设置,全自动化内容营销SOP",
          },
          {
            icon: require("@/assets/Product_page_facebook_desktop/icon_out_site_traffic_import.png"),
            name: "站外引流",
            content:
              " 适用于独立站进行产品推广，也可引流到各大电商平台如亚马逊、Shopee、Lazada等，还可适用于游戏出海、APP引流等",
          },
          {
            icon: require("@/assets/Product_page_facebook_desktop/icon_kol_character_auto_setting.png"),
            name: "KOL人设自动化打造",
            content: "通过预设话术脚本与批量涨粉技术，快速打造FaceBook带货KOL",
          },
        ],
      },
      quqiu: {
        title: "指定范围涨粉",
        imgbigurl: require("@/assets/Product_page_facebook_desktop/limited_range_fans_grow_img.png"),
        list: [
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/icon_subdivision_tag_precise_fans_grow.png"),
            name: "细分标签精准加粉",
            content:
              "可指定国家、性别、年龄、行业等标签进行目标人群快速源加Facebooik好友",
          },
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/icon_preset_words_guide_follow.png"),
            name: "预设话术引导互关",
            content:
              "批量加粉并发送预设话术，通过大批量加粉与话术引导互关快速涨粉 ",
          },
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/icon_vcf_contacts_fans_grow.png"),
            name: "VCF通讯录加粉",
            content:
              "可通过一键导入VCF号码通讯录，快速定位高精确目标人群进行加粉营销",
          },
        ],
      },
      obey: {
        title: "多坐席客服拓客",
        imgbigurl: require("@/assets/Product_page_whatsapp_desktop/real_customer_serive_online_img.png"),
        list: [
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/title_icon_mono_customer_service_100.png"),
            name: "客单服即可操纵上百账号",
            content:
              "通过单个聚合聊天页面即可随时切换账号并对数以万计的群发目标账号",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/title_icon_leader_watching.png"),
            name: "主管实时监控客服对接情况",
            content:
              "通过聚合聊天系统，主管可以直接监控每个坐席客服的实时对接情况，并且具备加粉、聊天计数等数据统计功能",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/title_icon_chat_assitant.png"),
            name: "快捷聊天辅助",
            content:
              "自动回复、关键词回复、快捷话术、即时翻译器......多种聊天辅助功能，轻松提高客服对接效率",
          },
        ],
      },
      fistitem: {
        title: "Facebook拓客系统的优势",
        list: [
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/global_target_user_get_img.png"),
            name: "全球精准客户资源获取",
            content:
              "生成任意地区号码，筛选活跃开通账号，消息群发最终转化精准客户资源",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/marketing_chain_support_img.png"),
            name: "营销全链路技术支持",
            content:
              "获取数据、转化客户资源、群发推广短信、营销客户服务全程技术支持",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/lowcost_promotion_channel_img.png"),
            name: "更低成本的推广渠道",
            content:
              "对比Facebook、Google等渠道投放或电商平台的内部投放，可以更有效压缩获客成本",
          },
        ],
      },
      bookdata: {
        title: "Facebook拓客系统适用于以下场景",
        list: [
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/facebook_user_data_get_img.png"),
            name: "用户数据获取",
            content:
              "指定群组、公共主页进行用户数据采集，获取用户如UID、邮箱、电话等信息，便于后续进行定向加粉、EDM、短信群发、whatsapp群发、Facebook广告自定义受众等营销手段",
          },
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/kol_fans_grow_img.png"),
            name: "KOL涨粉",
            content:
              "快速指定全球目标地区用户涨粉，打造目标地区kol，无论是电商还是其它营收项目，都可先收获流量方便后续变现。",
          },
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/content_marketing_photo_img.png"),
            name: "内容营销",
            content:
              "自动定时发布帖子，进行营销自动化，可通过不断的产品推广信息和自我曝光实现内容营销，增加引流变现能力",
          },
          {
            imgurl: require("@/assets/Product_page_facebook_desktop/target_trafficdata_import_img.png"),
            name: "定向引流",
            content:
              "可进行独立站、电商平台等店铺的站外引流，对于出海app、手游或其它社交平台主页(如INS、Twitter、Facebook等)也可以实现定向引流，提高目标流量。",
          },
        ],
      },
      //轮播新闻
      newslist: {
        theme: "出海资讯",
        list: [
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.facebook /deep/ .banner_grid_item_btn_left {
  display: none;
}
.sanlan_warp {
  max-width: 1140px;
  margin: 0 auto;
}
.layitem_warp_whie {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 40px;
}

.layitem_warp_whie > h4 {
  font-size: 38px;
  color: #1d2845;
  text-align: center;
}
/* WhatsApp客服系统的优势 */
.tydisplay {
  display: flex;
}
.whatsapp_warp {
  margin: 40px auto;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1140px;
}

.whatsapp_item {
  width: 290px;
  text-align: center;
  padding: 15px 0;
}

.whatsapp_item_img > img {
  width: 130px;
}

.whatsapp_item > h4 {
  font-size: 18px;
  color: #1d2845;
  margin: 15px;
}

.whatsapp_item > p {
  font-size: 14px;
  color: #7b8697;
  line-height: 21px;
}

/* WhatsApp拓客系统优势 */
.layitem_warp_whie {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 25px;
}

.layitem_warp_whie > h4 {
  font-size: 38px;
  color: #1d2845;
  text-align: center;
}
</style>
